import { Button, Form, Input, Select, Space } from "antd";
import { type User } from "../../../../types/system/user";
interface IProps {
  onChange: (form: User.Query) => void;
}
export default function QueryForm({ onChange }: IProps) {
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      layout="inline"
      name="userQuery"
      onFinish={(form) => {
        onChange(form);
      }}
      size="middle"
      autoComplete="off"
    >
      <Form.Item<User.Query> label="用户名" name="userName">
        <Input allowClear size="middle"/>
      </Form.Item>
      <Form.Item<User.Query> label="昵称" name="nickName">
        <Input allowClear size="middle"/>
      </Form.Item>
      <Form.Item<User.Query> label="邮箱" name="email">
        <Input allowClear size="middle"/>
      </Form.Item>
      <Form.Item<User.Query> label="性别" name="sex">
        <Select placeholder="请选择类别"  style={{ width: 180 }} allowClear size="middle">
        <Select.Option value="0">
              男
            </Select.Option>
            <Select.Option  value="1">
              女
            </Select.Option>
            <Select.Option value="2">
              未知
            </Select.Option>
        </Select>
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="middle"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
